<script setup lang="ts">
defineOptions({
  name: "planHeader"
});
import gunter from "@/assets/svg/common/gunter.svg?component";
import chart from "@/assets/svg/common/chart.svg?component";
import ReTextTooltip from "@/components/ReTextTooltip";

const chartList = defineModel("chartList", { type: Array<number>, default: () => [1] });
const chartType = defineModel("chartType", { type: String, default: "gunter" });

const emits = defineEmits(["change"]);

const legends = [
  {
    id: "001",
    backgroundColor: "#0061FF",
    // content: "蓝色：新建计划默认颜色"
    // content: "蓝色：未到计划开始时间"
    content: "蓝色：未开始"
  },
  //  暂时不考虑（产品同步--2024-9-5）
  // {
  //   id: "002",
  //   backgroundColor: "#C2C2C2",
  //   content: "灰色：已执行完的计划"
  // },
  // {
  //   id: "003",
  //   backgroundColor: "#FFFF00",
  //   // content: "黄色：Early Date <= 当前时间 < Due Date"
  //   content: "黄色：已到计划开始时间，未到计划执行时间"
  // },
  {
    id: "004",
    backgroundColor: "#FFA500",
    // content: "橙色：Due Date <= 当前时间 < Late Date"
    // content: "橙色：已到计划执行时间，未到计划结束时间"
    content: "橙色：待执行"
  },
  {
    id: "005",
    backgroundColor: "#FF0000",
    // content: "红色：当前时间 > Late Date"
    // content: "红色：超过计划结束时间"
    content: "红色：超期未执行"
  }
];

const checkboxChangeHandler = () => {
  emits("change");
};
</script>

<template>
  <div class="plan-header">
    <div class="plan-header-left">
      <div class="plan-header-type">
        <px-tooltip effect="dark" placement="top" content="甘特图">
          <gunter :class="['type-icon', chartType === 'gunter' ? '' : 'un-checked']" @click="chartType = 'gunter'" />
        </px-tooltip>

        <px-tooltip effect="dark" placement="top" content="列表">
          <chart :class="['type-icon', chartType === 'chart' ? '' : 'un-checked']" @click="chartType = 'chart'" />
        </px-tooltip>
      </div>

      <px-checkbox-group v-model="chartList" class="plan-header-checkbox" @change="checkboxChangeHandler">
        <px-checkbox :disabled="chartList.includes(1) && chartList.length === 1" :label="1">{{ `厂务PM计划` }}</px-checkbox>
        <px-checkbox :disabled="chartList.includes(2) && chartList.length === 1" :label="2">{{ `机台PM计划` }}</px-checkbox>
      </px-checkbox-group>
    </div>

    <div class="plan-header-legend">
      <div v-for="item in legends" :key="item.id" class="legend-item">
        <div class="legend-item-point" :style="{ backgroundColor: item.backgroundColor }" />
        <div class="legend-item-text">
          <ReTextTooltip :content="item.content" :style="{ fontSize: '12px', color: '#888', lineHeight: '1' }" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.plan-header {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;

  .plan-header-left {
    display: flex;
    flex-wrap: nowrap;
    gap: 36px;
    align-items: center;
    justify-content: space-between;

    .plan-header-type {
      display: flex;
      gap: 16px;
      align-items: center;

      .type-icon {
        width: 20px;
        color: var(--px-color-primary);
        cursor: pointer;
        outline: none !important;
      }

      .un-checked {
        color: #d5d5d5;
      }
    }

    .plan-header-checkbox {
      .px-checkbox {
        height: 26px;
      }
    }
  }

  .plan-header-legend {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% - 350px);

    .legend-item {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: center;
      max-width: calc(25% - 24px);

      .legend-item-point {
        width: 18px;
        height: 12px;
        background-color: #eee;
        border-radius: 4px;
      }

      .legend-item-text {
        width: calc(100% - 26px);
      }
    }
  }
}
</style>
